<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/config.css">
		<style>
		body {
			background: #333333;
			
		}
			.head {
				width: 100vw;
				height: 6vh;
				float: left;
				background: #000000;
				font-size: 6vw;
				line-height: 6vh;
				text-align: center;
				border-bottom: #FFFFFF 1px solid;
				position: absolute;
				top: 0;
				z-index: 99; 
				color: #007AFF;
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;

			}
			.top{
				color: #FFFFFF;
				padding: 2vh;
				margin-top: 6vh;
				width: 100vw;
				height: 13vh;
				overflow: hidden;
			}
			.img_heard {
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;
				float: left;
				width: 10vh;
				height: 10vh;
				border-radius: 2vw;
			}
			.name{
				width: 60vw;
				height: 4vh;
				margin-left: 12vh;
				margin-top: 1vh;
				font-size: 3vh;
				position: absolute;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap
			}
			.code {
				width: 60vw;
				height: 3vh;
				margin-left: 12vh;
				margin-top: 6vh;
				font-size: 2vh;
				position: absolute;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap
			}
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view li img {
				width: 20px;
				height: 20px;
				float: left;
				margin-right: 15px;
			}
			
			#button_area {
				margin: 40px 15px;
			}
			
			#button_area button {
				padding: 5px 20px;
			}
			
			.mui-navigate-right:after,
			.mui-push-right:after {
				
				content: '';
			}
			.mui-content-padded {
				margin-top: 25px;
			}
		</style>
	</head>
	<body>
		<header class="head">
			我的
		</header>
		<div class="top">
			<img id="headImg" class="img_heard" src="../../images/slider2.jpeg" >
			<div id="nickname" class="name">昵称33333333333333333333444</div>
			<div id="username" class="code">账号</div>
		</div>
		<ul id="menu" class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
			<li class="mui-table-view-cell" id="my_info">
				<a class="mui-navigate-right"><img src="../../images/my_1.png">修改个人信息</a>
			</li>
			<li class="mui-table-view-cell" id="my_collect">
				<a class="mui-navigate-right"><img src="../../images/shouchang.png">我的收藏</a>
			</li>
			<li class="mui-table-view-cell" id="my_parse">
				<a class="mui-navigate-right"><img src="../../images/my_parse.png">我的点赞</a>
			</li>
			<li class="mui-table-view-cell" id="my_share">
				<a class="mui-navigate-right"><img src="../../images/fenxiang.png">我的分享</a>
			</li>
			<!-- <li class="mui-table-view-cell" id="my_kefu">
				<a class="mui-navigate-right"><img src="../../images/kefu.png">联系客服</a>
			</li> -->
			<li class="mui-table-view-cell" id="my_guanyu">
				<a class="mui-navigate-right"><img src="../../images/guanyu.png">关于我们</a>
			</li>
		</ul>
		<div class="mui-content-padded">
			<button id='logout' class="mui-btn mui-btn-block" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="请稍候">退出</button>
		</div>
		</div>
		
		

	</body>
	<script src="../../js/mui.js"></script>
	<script src="../../js/jquery-1.4.2.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/config.js"></script>
	<script type="text/javascript">
		mui.init({
			pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: {
					
					style: 'circle',
					callback: pulldownRefresh
				},
				up: {
					auto: true,
					style: 'circle',
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});

		options = {
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			startX: 0, //初始化时滚动至x
			startY: 0, //初始化时滚动至y
			indicators: true, //是否显示滚动条
			deceleration: 0.5, //阻尼系数,系数越小滑动越灵敏
			bounce: true //是否启用回弹
		}


		var user = app.getUserInfo();
		$('#headImg').attr('src', user.headImageUrl);
		$('#nickname').html(user.nickname);
		$('#username').html("账号:"+user.username);
		// mui.init({
		// 		pullRefresh: {
		// 			container: '#pullrefresh',
		// 			down: {
		// 				style:'circle',
		// 				callback: pulldownRefresh
		// 			},
		// 			up: {
		// 				auto:true,
		// 				contentrefresh: '正在加载...',
		// 				callback: pullupRefresh
		// 			}
		// 		}
		// 	});

		var count = 0; 

		function pullupRefresh() {
			
				setTimeout(function() {
					mui('#refreshContainer').pullRefresh().endPullupToRefresh((++count > 2));
			}, 1500);
		}

		/**
		 * 下拉刷新具体业务实现
		 */
		function pulldownRefresh() {

			mui.toast("为你推荐了5篇文章");
			mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
		}
		
		mui.plusReady(function() {
		mui("#menu").on('tap', '.mui-table-view-cell', function() {
			var id = this.getAttribute("id");
			if (id == "my_info") {
			
			var html = 'my_info.html';
			var id = 'my_info';
			w = plus.webview.create(html, id, {
				hardwareAccelerated: true,
				scrollIndicator: 'none', 
				scalable: true,
				bounce: 'all'
			});
			w.show('pop-in');
			}
			if (id == "my_collect") {
			
			var html = 'my_collect.html';
			var id = 'my_collect';
			w = plus.webview.create(html, id, {
				hardwareAccelerated: true,
				scrollIndicator: 'none', 
				scalable: true,
				bounce: 'all'
			});
			w.show('pop-in');
			}
			if (id == "my_parse") {
			
			var html = 'my_parse.html';
			var id = 'my_parse';
			w = plus.webview.create(html, id, {
				hardwareAccelerated: true,
				scrollIndicator: 'none', 
				scalable: true,
				bounce: 'all'
			});
			w.show('pop-in');
			}
			if (id == "my_share") {
		
			
			var html = 'my_share.html';
			var id = 'my_share';
			w = plus.webview.create(html, id, {
				hardwareAccelerated: true,
				scrollIndicator: 'none', 
				scalable: true,
				bounce: 'all'
			});
			w.show('pop-in');
			}
			if (id == "my_kefu") {
		
			var html = 'my_kefu.html';
			var id = 'my_kefu';
			w = plus.webview.create(html, id, {
				hardwareAccelerated: true,
				scrollIndicator: 'none', 
				scalable: true,
				bounce: 'all'
			});
			w.show('pop-in');
			}
			if (id == "my_guanyu") {
			
			var html = 'my_guanyu.html';
			var id = 'my_guanyu';
			w = plus.webview.create(html, id, {
				hardwareAccelerated: true,
				scrollIndicator: 'none', 
				scalable: true,
				bounce: 'all'
			});
			w.show('pop-in');
			}
		});
		
		
		
		var logout = document.getElementById("logout");
		logout.addEventListener('click',function(){
			localStorage.setItem("data", null);
			localStorage.setItem("shareDetailed", null);
			localStorage.setItem("childData", null);
			localStorage.setItem("url", null);
			plus.webview.getWebviewById("index").close();
			closeAll();
		})
		
		
		window.addEventListener('reload',function(event){
		             window.location.reload(); //页面更新
					 
		            });
		});
	</script>
</html>
